import React, { useState, useEffect, useImperativeHandle, useRef } from 'react';
import './Pro_Form_Table.less';

import { DownOutlined, UpOutlined } from '@ant-design/icons';

import { Form, Input, Button, Select, Table, Pagination } from 'antd';
const { Option } = Select;

function Pro_Form_Table(props, res) {
  const [inputArr, setInputArr] = useState([]);
  const [btnArr, setBtnArr] = useState([]);
  const [form] = Form.useForm();
  const formRef = useRef();
  const [isshow, setIsshow] = useState(false);
  const [createBtnConfig, setCreateBtnConfig] = useState([]); //  创建按钮的 配置
  const [columns, setColumns] = useState([]); //  table 表单的 配置项
  const [data, setData] = useState([]); //  table 表格的 数据源
  const [tableConfig, setTableConfig] = useState({}); //  table 表格的 配置项
  const [pagination, setPagination] = useState({}); // 分页的 配置
  useEffect(() => {
    if (props.inputConfig && props.inputConfig.length) {
      // console.log(props.inputConfig);
      // console.log(props.btnConfig);
      setInputArr(props.inputConfig);
    }
    if (props.btnConfig && props.btnConfig.length) {
      setBtnArr(props.btnConfig);
    }
    if (props.createBtnConfig && props.createBtnConfig.length) {
      setCreateBtnConfig(props.createBtnConfig);
    }
    if (props.columns && props.columns.length) {
      setColumns(props.columns);
    }
    if (props.data && props.data.length) {
      setData(props.data);
    }
    if (props.tableConfig && Object.keys(props.tableConfig).length) {
      // console.log("table 配置", props.tableConfig)
      setTableConfig(props.tableConfig);
    }
    if (props.Pagination && Object.keys(props.Pagination).length) {
      // console.log("分页的配置: ", props.Pagination)
      setPagination(props.Pagination);
    }
  }, []);

  useImperativeHandle(res, () => ({
    // 表单验证 时的 回调
    validateFields: (formRef.current.btnCheck = function () {
      return form.validateFields();
    }),
    // 获取 表单中的 数据
    getFieldValue: (formRef.current.b = function () {
      return form.getFieldValue();
    }),
    // 重置表单
    resetFields: (formRef.current.c = function () {
      form.resetFields();
    }),
  }));

  const btnCheck = async () => {
    let a = await form.validateFields();
    console.log('查看', a);
  };

  const resetFields = () => {
    form.resetFields();
  };

  return (
    <div ref={formRef}>
      <div className={!isshow ? 'show' : ''}>
        {/* form 表单 */}
        <Form
          name="basic"
          form={form}
          labelCol={{ span: props.formArr.labelCol }}
          wrapperCol={{ span: props.formArr.wrapperCol }}
          initialValues={props.formArr.initialValues}
          autoComplete="off"
          style={props.formArr.style}
          className={!isshow ? 'height' : ''}
        >
          {inputArr.length &&
            inputArr.map((form_item, form_index) => (
              // <Form.Item
              //     key={form_index}
              //     label={form_item.label}
              //     name={form_item.name}
              //     rules={[{ required: form_item.rules.required, message: form_item.rules.message }]}
              //     style={form_item.style}
              // >
              //     { <Input placeholder={form_item.placeholder}  /> }
              // </Form.Item>

              <div
                key={form_index}
                className={form_index > 1 && !isshow ? 'none' : 'show'}
              >
                {form_item.type === 'input' ? (
                  // <div>
                  <Form.Item
                    label={form_item.label}
                    name={form_item.name}
                    rules={[
                      {
                        required: form_item.rules.required,
                        message: form_item.rules.message,
                      },
                    ]}
                    style={form_item.style}
                  >
                    <Input placeholder={form_item.placeholder} />
                  </Form.Item>
                ) : form_item.type === 'select' ? (
                  <Form.Item
                    label={form_item.label}
                    name={form_item.name}
                    rules={[
                      {
                        required: form_item.rules.required,
                        message: form_item.rules.message,
                      },
                    ]}
                    style={form_item.style}
                  >
                    {/* <Input placeholder={form_item.placeholder}  /> */}
                    <Select
                      // style={form_item.style}  //  这个样式 有点问题 width 的问题
                      style={{ width: '200px' }}
                      placeholder={form_item.placeholder}
                    >
                      {form_item.valueArr.length &&
                        form_item.valueArr.map((select_item, select_index) => (
                          <Option key={select_index} value={select_item.id}>
                            {select_item.name}
                          </Option>
                        ))}
                    </Select>
                  </Form.Item>
                ) : // </div>
                null}
              </div>
            ))}
        </Form>
        {/* 查询 重置的 按钮 */}
        <div style={props.btnStyle}>
          {btnArr.length &&
            btnArr.map((btn_item, btn_index) => (
              <Button
                key={btn_index}
                type={btn_item?.type}
                disabled={btn_item.disabled}
                style={btn_item.style}
                onClick={btn_item.btn}
              >
                {btn_item.name}
              </Button>
            ))}
          <div
            style={{ cursor: 'pointer', color: '#1890ff' }}
            onClick={() => {
              setIsshow(!isshow);
            }}
            className="nowrap"
          >
            {isshow ? (
              <div>
                收齐 <UpOutlined />{' '}
              </div>
            ) : (
              <div>
                展开 <DownOutlined />{' '}
              </div>
            )}
          </div>
        </div>
      </div>
      {/* 创建弹窗的按钮 */}
      <div className={!isshow ? 'create_btn' : null}>
        {createBtnConfig.length &&
          createBtnConfig.map((createBtn_item, createBtn_index) => (
            <Button
              key={createBtn_index}
              type={createBtn_item.type}
              style={createBtn_item.style}
              onClick={createBtn_item.btn}
            >
              {createBtn_item.name}
            </Button>
          ))}
      </div>
      {/* table 表单的按钮 */}
      <Table
        pagination={tableConfig.pagination}
        style={tableConfig.style}
        rowSelection={tableConfig.selectedRowKeys}
        columns={columns}
        dataSource={data}
      />

      {/* table 表格的 分页 */}
      <Pagination
        total={pagination.total}
        current={pagination.current}
        showSizeChanger={pagination.showSizeChanger}
        showQuickJumper={pagination.showQuickJumper}
        showTotal={pagination.showTotal}
        style={pagination.style}
        onChange={pagination.onChange}
        pageSizeOptions={pagination.pageSizeOptions}
      />
    </div>
  );
}

// export default React.forwardRef(Pro_Form_Table);

const A = React.forwardRef(Pro_Form_Table); // 函数 默认的 导出方式
A.displayName = 'Pro_Form_Table';
A.defaultProps = {
  formArr: {
    // labelCol: 8,
    // wrapperCol: 8,
    initialValues: {
      //  表单中的 默认值
      itemNum: '表单中的默认值',
      // itemName: "2234- 默认值",
    },
    style: {
      display: 'flex',
      flexWrap: 'wrap',
    },
  },
};
export default A;
